<template>
	<view>
		<view>
			<view class="iconfont icon-guanbi flex align-center justify-center font-lg"
				style="width:100rpx;height: 100rpx; " hover-class="bg-light" @click="back">
			</view>
		</view>
		<view class="text-center font-lg" style="padding-top:130rpx;padding-bottom: 70rpx;">
			{{loginType ?'手机验证码登录':'账号密码登录'}}</view>
		<template v-if="!loginType">
			<view class="px-2">
				<view class="mb-2">
					<input type="text" v-model="username" placeholder="昵称/手机号" class="p-2 border-bottom" />
				</view>
				<view class="mb-2 flex align-stretch">
					<input type="text" v-model="password" placeholder="请输入密码" class="p-2 border-bottom flex-1" />
					<view class="border-bottom flex align-center justify-center font text-light-muted"
						style="width: 150rpx;" @click="">忘记密码?</view>
						
				</view>
			</view>
		</template>
		<template v-else>
			<view class="mb-2 flex align-stretch">
				<view class="flex border-bottom align-center justify-center font px-2">+86</view>
				<input type="text" v-model="phone" placeholder="手机号" class="p-2 border-bottom flex-1" />
			</view>
			<view class="mb-2 flex align-stretch">
				<input type="text" v-model="code" placeholder="请输入验证码" class="p-2 border-bottom flex-1" />
				<view @click="getCode" class="border-bottom flex align-center justify-center font-sm text-white bg-main"
					style="width: 180rpx;">{{codeTime>0?codeTime+'秒':'获取验证码'}}</view>
			</view>
		</template>


		<view class="py-2 px-3 flex justify-between align-center">
			
			<button class="bg-main text-white px-8"  :disabled="disabled" @click="submit"
				style="border-radius: 50rpx; border: 0;" type="primary">登录</button>
				
			<button class="bg-light text-white px-8"  @click="register"
				style="border-radius: 50rpx; border: 0;" type="primary">注册</button>	
		</view>
		<view class="flex align-center justify-center pt-1 pb-3">
			<view class="text-primary font-sm" @click="changeLoginType">{{loginType?'账号密码登录':'手机验证码登录'}}</view>
			<text class="text-muted mx-2">|</text>
			<view class="text-primary font-sm">登录遇到问题</view>
		</view>
		<!-- <view class="flex align-center justify-center">
			<view style="height:1rpx ;background-color: #dddddd;width: 100rpx;"></view>
			<view class="mx-2 text-muted">社交账号登录</view>
			<view style="height:1rpx ;background-color: #dddddd;width: 100rpx;"></view>
		</view>
		<view class="flex align-center justify-center">
			<view class="flex-1 flex align-center justify-center">
			</view>
			<view class="flex-1 flex align-center justify-center">

				<view
					class="iconfont icon-weixin font-lg text-white bg-green flex align-center justify-center border-circle"
					style="width: 100rpx;height: 100rpx;">
				</view>
			</view>
			<view class="flex-1 flex align-center justify-center">

			</view>
		</view> -->
		<view class=" flex align-center justify-center text-muted">
			注册即同意<text class="text-primary">《校园协议》</text>
		</view>
	</view>
</template>


<script>
	import uniStatusBar from '@/components/uni-status-bar/uni-status-bar.vue'
	import otherLogin from '@/components/common/other-login.vue'
	export default {
		components: {
			otherLogin
		},
		data() {
			return {
				loginType: false,
				username: '',
				password: '',
				phone: '',
				code: '',
				codeTime: 0
			}
		},
		computed: {
			disabled() {
				if (!this.loginType && (this.username == '' || this.password == '')) {
					return true;
				} else if (this.loginType && (this.phone == '' || this.code == '')) {
					return true;
				}
				return false;
			}
		},
		methods: {
			back() {
               uni.navigateBack({
               	delta:1
               })
			},
			changeLoginType() {
				this.loginType = !this.loginType
			},
			validate() {
				let regex = /^(0|\+?86|17951)?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8}$/
				if (!regex.test(this.phone)) {
					uni.showToast({
						title: '手机号错误',
						icon: 'none'
					})
					return false;
				}
				return true;

			},
			submit() {
				if (!this.loginType) {
					this.$R.postNoToken('/login', {
						username: this.username,
						password: this.password
					}).then((res) => {

						this.$store.commit("login", res.token);
						this.$R.get('/getInfo').then((res) => {
							if(res.code==200){
								this.$store.commit("loginUser", res.user)
							}
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						setTimeout(function() {
							uni.switchTab({
								url:'../home/home'
							})
						}, 2000);
						})
					})
				}
				
			},
            register(){
				uni.navigateTo({
					url:'../register/register'
				})
			},
			getCode() {
				if (this.codeTime > 0) {
					return;
				}
				if (this.this.validate()) {
					this.codeTime = 60;
					let timer = setInterval(() => {
						if (this.codeTime >= 1) {
							this.codeTime--
						} else {
							this.codeTime = 0;
							clearInterval(timer)
						}
					}, 1000)
				}
			}
		}
	}
</script>
<style>


</style>
